<template>
    <div class="order-management-container">
        <!-- 面包屑组件 -->
        <Crumbs :img="portrait" text1="订单管理" :text3="username"/>
        <div class="order-management-content">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item  label="订单号">
                    <el-input v-model="formInline.user1" placeholder="订单号"></el-input>
                </el-form-item>   
                <el-form-item  label="收件人">
                    <el-input v-model="formInline.user2" placeholder="收件人"></el-input>
                </el-form-item>  
                <el-form-item  label="手机号">
                    <el-input v-model="formInline.user3" placeholder="手机号"></el-input>
                </el-form-item>  
                <el-form-item label="订单状态">
                    <el-select v-model="formInline.region" placeholder="订单状态">
                        <el-option label="已受理" value="1"></el-option>
                        <el-option label="已完成" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            
             <p class="time">选择时间：<el-date-picker
            v-model="value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="clickQuery">查询</el-button>
            </p>

             <el-table
            :data="tableData"
            border
            style="width: 100%">
                <el-table-column
                prop="orderNo"
                label="订单号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="deliveryTime"
                label="下单时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="phone"
                label="手机号"
                width="140">
                </el-table-column>
                <el-table-column
                prop="consignee"
                label="收货人"
                width="100">
                </el-table-column>
                <el-table-column
                prop="deliverAddress"
                label="配送地址"
                width="150">
                </el-table-column>
                <el-table-column
                prop="orderTime"
                label="结束时间"
                width="120">
                </el-table-column>
                <el-table-column
                prop="remarks"
                label="用户备注"
                width="100">
                </el-table-column>

                <!-- {
                    consignee: "汪小哥"
                    deliverAddress: "天府新谷"
                    deliveryTime: "2020-04-16T02:44:58.000Z"
                    id: 21
                    orderAmount: 30
                    orderNo: "16013"
                    orderState: "已完成"
                    orderTime: "2020-06-04T09:35:19.000Z"
                    phone: "18181358998"
                    remarks: "不要辣"
                } -->

                <el-table-column
                prop="orderAmount"
                label="订单金额"
                width="80">
                </el-table-column>
                <el-table-column
                prop="orderState"
                label="订单状态"
                width="100">
                </el-table-column>
                <el-table-column
                label="操作"
                width="100">
                <template slot-scope="obj">
                    <button class="btn" @click="obtainOrderDetails(obj.row)">查看</button>
                    <button class="btn" @click="changeOrder(obj.row)">编辑</button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination
             @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-sizes="[5, 8, 10, 15]"
            :page-size="pageSize"
            layout="total,sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>

            <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
                <el-table :data="gridData">
                    <el-table-column property="id" label="订单id"></el-table-column>
                    <el-table-column property="orderNo" label="订单号" width="" ></el-table-column>
                    <el-table-column property="deliveryTime" label="下单时间" width="200px"></el-table-column>
                    <el-table-column property="deliverAddress" label="地址"></el-table-column>
                    <el-table-column property="phone" label="手机号" width="150"></el-table-column>
                    <el-table-column property="consignee" label="收货人"></el-table-column>
                    <el-table-column property="orderTime" label="结束时间" width="200px"></el-table-column>
                    <el-table-column property="remarks" label="用户备注"></el-table-column>
                    <el-table-column property="orderAmount" label="订单金额"></el-table-column>
                    <el-table-column property="orderState" label="订单状态"></el-table-column>
                </el-table>
            </el-dialog>
<!-- 
            //     {consignee: "汪小哥"
// deliverAddress: "天府新谷"
// deliveryTime: "2020-04-16T02:44:58.000Z"
// id: 21
// orderAmount: 30
// orderNo: "16013"
// orderState: "已完成"
// orderTime: "2020-06-04T09:35:19.000Z"
// phone: "18181358998"
// remarks: "不要辣"} -->
        
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="商品id" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.id" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="订单号" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.orderNo" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收货人" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.consignee" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="下单时间" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.deliveryTime" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="结束时间" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.orderTime" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="收货地址" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.deliverAddress" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="用户备注" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.remarks" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="订单金额" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.orderAmount" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态" :label-width="formLabelWidth">
                        <el-input v-model="orderObj.orderState" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="clickDetermine">确 定</el-button>
                </div>
            </el-dialog>
        
        
        </div>
    </div>
</template>

<script>
    import Crumbs from "../../components/Crumbs"
    import {orderList,orderDetail,orderEdit} from "@/apis/api"
    import {conversionTime} from "@/utlis/utlis"
    let imgUrl=window.localStorage.getItem("imgUrl")
    let account=window.localStorage.getItem("account")
export default {
    components:{
        Crumbs
    },
    data(){
        return{
            portrait:"xxx",
            username:"",
            formInline: {
                user1: '',
                user2: '',
                user3: '',
                region: ''
                },
            tableData:[],
            gridData: [],
            dialogTableVisible: false,
            dialogFormVisible:false,
            form: {
                 name:""
             },
            formLabelWidth: '120px',
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
                },
            value: "",

            total:0,
            curPage:1,
            pageSize:5,
            orderNo:"",
            consignee:"",
            phone:"",
            orderState:"",
            date:"",
            timeArr:[],
            orderObj:{},
        }
    },
    created(){
      this.portrait=imgUrl
      this.username=account
      this.obtainList()
    },
    methods:{
        //获取订单列表
        obtainList(){
            orderList({
                currentPage:this.curPage,
                pageSize:this.pageSize,
                orderNo: this.orderNo,
                consignee:this.consignee,
                phone:this.phone,
                orderState:this.orderState,
                date:this.date
            })
            .then(res=>{
                // console.log(res)
                if(res.status===200){
                    for(let obj of res.data.data){
                        obj.deliveryTime=conversionTime(obj.deliveryTime)
                        obj.orderTime=conversionTime(obj.orderTime)
                    }
                    this.tableData=res.data.data
                    this.total=res.data.total
                }
            })
        },
        //当前页数据数量
        handleSizeChange(val){
           this.pageSize=val;
           this.obtainList();
        },
        //翻页
        handleCurrentChange(val){
           this.curPage=val;
            this.obtainList();
        },
        //查询订单
        clickQuery(){
            this.timeArr=[]
            if(this.value){
                this.value.forEach(v=>{
                    this.timeArr.push( conversionTime(v) )
                })
            }
            // console.log(JSON.stringify(this.timeArr))
            this.orderNo=this.formInline.user1
            this.consignee=this.formInline.user2
            this.phone=this.formInline.user3
            this.orderState=this.formInline.region
            this.date=JSON.stringify(this.timeArr)

            this.obtainList()
        },
        //获取订单详情
        obtainOrderDetails(row){
            this.dialogTableVisible = true;
            this.gridData=[];
            orderDetail({
                id:row.id
            }).then(res=>{
                // console.log(res.data)
                res.data.data.deliveryTime=conversionTime(res.data.data.deliveryTime);
                res.data.data.orderTime=conversionTime(res.data.data.orderTime);
                this.gridData.push(res.data.data);
            })
        },
        //编辑订单
        changeOrder(row){
            this.dialogFormVisible = true;
            orderDetail({
                id:row.id
            }).then(res=>{
                res.data.data.deliveryTime=conversionTime(res.data.data.deliveryTime);
                res.data.data.orderTime=conversionTime(res.data.data.orderTime);
                this.orderObj=res.data.data
            })        
        },
        //编辑完成
        clickDetermine(){
        this.dialogFormVisible = false;
        orderEdit({
            id:this.orderObj.id,
            orderNo:this.orderObj.orderNo,
            orderTime:this.orderObj.orderTime,
            phone:this.orderObj.phone,
            consignee:this.orderObj.consignee,
            deliverAddress:this.orderObj.deliverAddress,
            deliveryTime:this.orderObj.deliveryTime,
            remarks:this.orderObj.remarks,
            orderAmount:this.orderObj.orderAmount,
            orderState:this.orderObj.orderState
        }).then(res=>{
            // console.log(res.data)
            this.obtainList()
            this.$message({
                message:res.data.msg,
                type: 'success'
            });
        })
        }
    }
    
}
</script>

<style lang=less scoped>
    .order-management-container{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
    }
    .order-management-content{
        flex:1;
        overflow:scroll;
        margin:15px;
        padding:15px;
        width:100%;
        background-color:#fff;
    }
    .demo-ruleForm{
        /* width:600px; */
        .el-button{
            width:80px;
        }
    }
    .btn{
        margin-right:10px;
        color:dodgerblue;
        background-color:#fff;
        border:0;
        outline: none;
        cursor: pointer;
    }
    .time{
        color:darkslategrey;
    }
    .el-button{
        margin-left:20px;
        width:70px;
    }
    .el-pagination{
        margin-top:15px;
    }
    .el-table{
        margin-top:50px;
    }
    
</style>